<template>
  <div class="app-container">
    <el-form
      class="pclient_form"
      label-position="top"
      ref="form"
      :model="form"
      :rules="rules"
      style="margin-left: 26px;">
      <el-row class="row1">
        <el-col :span="8">
          <el-form-item label="Company Name" prop="name">
            <el-input v-model="form.name" @blur='handleBlur()' placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <!--<el-row class="row1">-->
        <!--<el-col :span="12">-->
          <!--<el-form-item label="Created at" prop="createAt">-->
            <!--<el-date-picker-->
              <!--v-model="form.createAt"-->
              <!--value-format="yyyy-MM-dd"-->
              <!--type="date"-->
            <!--&gt;</el-date-picker>-->
          <!--</el-form-item>-->
        <!--</el-col>-->
      <!--</el-row>-->
      <el-row class="row1">
        <el-col :span="8">
          <el-form-item label="Address" prop="address">
            <el-input v-model="form.address" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row1">
        <el-col :span="8">
          <el-form-item label="Industry" prop="industry">
            <el-input v-model="form.industry" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row1">
        <el-col :span="8">
          <el-form-item label="Contact" prop="contact1">
            <el-input v-model="form.contact1" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row1">
        <el-col :span="8">
          <el-form-item label="Phone" prop="tel11">
            <el-input v-model="form.tel11" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row1">
        <el-col :span="8">
          <el-form-item label="Email" prop="email1">
            <el-input v-model="form.email1" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row1">
        <el-col :span="8">
          <el-form-item label="T&C signed name" prop="signerName">
            <el-input v-model="form.signerName" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row1">
        <el-col :span="8">
          <el-form-item label="T&C signed position" prop="signerPosition">
            <el-input v-model="form.signerPosition" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row1">
        <el-col :span="18">
          <el-form-item label="T&C Template Download">
            <div style="display: flex;margin-top: 10px;">
              <div style="text-align: center;
                          cursor:pointer;
                          border: 1px #cccccc dashed;
                          padding: 10px 8px 0 8px;" @click="downloadFile1()">
                <svg t="1703575432397" class="icon" viewBox="0 0 1024 1024"
                     version="1.1" xmlns="http://www.w3.org/2000/svg"
                     p-id="7180" width="40" height="40"><path d="M901.08928 925.3888a48.13824 48.13824 0 0 1-14.24896 34.38592 48.77312 48.77312 0 0 1-34.38592 14.24896H171.07456a48.13824 48.13824 0 0 1-34.3808-14.24896 48.74752 48.74752 0 0 1-14.24896-34.38592V49.42336a48.18944 48.18944 0 0 1 14.24896-34.40128A48.74752 48.74752 0 0 1 171.07456 0.77824h417.9968a48.5888 48.5888 0 0 1 34.59072 14.09024l263.3472 263.33184a48.68096 48.68096 0 0 1 14.08 34.59072z" fill="#EBECF0" p-id="7181"></path><path d="M901.08928 925.3888v48.68608a48.18944 48.18944 0 0 1-14.24896 34.39616 48.77312 48.77312 0 0 1-34.38592 14.24896H171.07456a48.70656 48.70656 0 0 1-48.68096-48.69632v-48.63488a48.13824 48.13824 0 0 0 14.24384 34.38592 48.74752 48.74752 0 0 0 34.38592 14.24896h681.32864a48.81408 48.81408 0 0 0 48.68608-48.68608z" fill="#C1C7D0" p-id="7182"></path><path d="M25.11872 536.09472h973.24544v243.33824a48.81408 48.81408 0 0 1-48.61952 48.68096H73.81504a48.18944 48.18944 0 0 1-34.39616-14.24384 48.74752 48.74752 0 0 1-14.24896-34.38592z" fill="#317BFF" p-id="7183"></path><path d="M122.496 536.08448V438.71744L25.11872 536.08448z m778.59328 0l0.93184-97.36704 96.86016 97.36704z" fill="#234AE8" p-id="7184"></path><path d="M901.08928 312.73984v6.84032h-263.3216a48.6912 48.6912 0 0 1-48.6912-48.68096V0.72704a48.5888 48.5888 0 0 1 34.5856 14.09024l263.76192 263.22944a49.3312 49.3312 0 0 1 13.66528 34.69312z" fill="#C1C7D0" p-id="7185"></path><path d="M259.67616 606.58176l19.7888 102.54848 18.8928-102.5536h52.1728l-40.47872 165.52448H256.0768l-18.8928-96.25088h-0.90112l-18.88768 96.25088H164.32128l-41.37984-165.51936h53.07392l17.99168 102.54848h0.90112l19.7888-102.5536zM447.68256 602.0864q81.8432 3.60448 87.25504 86.35392-3.6096 82.77504-87.25504 86.35904-83.6608-2.69824-86.35904-87.26016 4.49024-80.95232 86.35904-85.4528z m0 40.47872q-30.59712 0.90624-32.384 45.8752 1.792 46.78656 32.384 47.67744 32.384-0.89088 33.28-47.67744-1.81248-45.8752-33.28-45.8752zM628.49024 714.53184h-16.18944V772.096h-53.96992v-165.51936h78.2592q76.4416-1.792 72.8576 46.77632-0.896 32.38912-27.88864 40.48384 30.5664 6.2976 28.78976 44.07296v7.19872q-0.90112 24.28416 5.4016 21.59104v5.39648h-54.88128q-2.68288-5.4016-2.688-28.78464 3.584-31.47776-29.69088-28.78464z m-16.18944-69.26848v32.384h21.59104q26.9824 0.90624 26.07616-15.29344-0.896-16.18944-22.4768-17.09056zM809.29792 772.096h-71.0656v-165.51424h72.86784q85.4528 0.90624 86.35904 79.16544 0 86.35392-88.16128 86.35392z m-17.08544-126.83264v88.15616h11.68896q38.66624 0 38.67648-44.9792 2.70336-46.76096-39.5776-43.17696z" fill="#FFFFFF" p-id="7186"></path></svg>
                <div style="margin-top: -20px;">
                  <span style="color: #8c939d;">T&C Jobslink(专才版）long term</span>
                </div>
              </div>
              <div style="text-align: center;
                          margin-left: 10px;
                          cursor:pointer;
                          border: 1px #cccccc dashed;
                          padding: 10px 0 0 8px;" @click="downloadFile2()">
                <svg t="1703575432397" class="icon" viewBox="0 0 1024 1024"
                     version="1.1" xmlns="http://www.w3.org/2000/svg"
                     p-id="7180" width="40" height="40"><path d="M901.08928 925.3888a48.13824 48.13824 0 0 1-14.24896 34.38592 48.77312 48.77312 0 0 1-34.38592 14.24896H171.07456a48.13824 48.13824 0 0 1-34.3808-14.24896 48.74752 48.74752 0 0 1-14.24896-34.38592V49.42336a48.18944 48.18944 0 0 1 14.24896-34.40128A48.74752 48.74752 0 0 1 171.07456 0.77824h417.9968a48.5888 48.5888 0 0 1 34.59072 14.09024l263.3472 263.33184a48.68096 48.68096 0 0 1 14.08 34.59072z" fill="#EBECF0" p-id="7181"></path><path d="M901.08928 925.3888v48.68608a48.18944 48.18944 0 0 1-14.24896 34.39616 48.77312 48.77312 0 0 1-34.38592 14.24896H171.07456a48.70656 48.70656 0 0 1-48.68096-48.69632v-48.63488a48.13824 48.13824 0 0 0 14.24384 34.38592 48.74752 48.74752 0 0 0 34.38592 14.24896h681.32864a48.81408 48.81408 0 0 0 48.68608-48.68608z" fill="#C1C7D0" p-id="7182"></path><path d="M25.11872 536.09472h973.24544v243.33824a48.81408 48.81408 0 0 1-48.61952 48.68096H73.81504a48.18944 48.18944 0 0 1-34.39616-14.24384 48.74752 48.74752 0 0 1-14.24896-34.38592z" fill="#317BFF" p-id="7183"></path><path d="M122.496 536.08448V438.71744L25.11872 536.08448z m778.59328 0l0.93184-97.36704 96.86016 97.36704z" fill="#234AE8" p-id="7184"></path><path d="M901.08928 312.73984v6.84032h-263.3216a48.6912 48.6912 0 0 1-48.6912-48.68096V0.72704a48.5888 48.5888 0 0 1 34.5856 14.09024l263.76192 263.22944a49.3312 49.3312 0 0 1 13.66528 34.69312z" fill="#C1C7D0" p-id="7185"></path><path d="M259.67616 606.58176l19.7888 102.54848 18.8928-102.5536h52.1728l-40.47872 165.52448H256.0768l-18.8928-96.25088h-0.90112l-18.88768 96.25088H164.32128l-41.37984-165.51936h53.07392l17.99168 102.54848h0.90112l19.7888-102.5536zM447.68256 602.0864q81.8432 3.60448 87.25504 86.35392-3.6096 82.77504-87.25504 86.35904-83.6608-2.69824-86.35904-87.26016 4.49024-80.95232 86.35904-85.4528z m0 40.47872q-30.59712 0.90624-32.384 45.8752 1.792 46.78656 32.384 47.67744 32.384-0.89088 33.28-47.67744-1.81248-45.8752-33.28-45.8752zM628.49024 714.53184h-16.18944V772.096h-53.96992v-165.51936h78.2592q76.4416-1.792 72.8576 46.77632-0.896 32.38912-27.88864 40.48384 30.5664 6.2976 28.78976 44.07296v7.19872q-0.90112 24.28416 5.4016 21.59104v5.39648h-54.88128q-2.68288-5.4016-2.688-28.78464 3.584-31.47776-29.69088-28.78464z m-16.18944-69.26848v32.384h21.59104q26.9824 0.90624 26.07616-15.29344-0.896-16.18944-22.4768-17.09056zM809.29792 772.096h-71.0656v-165.51424h72.86784q85.4528 0.90624 86.35904 79.16544 0 86.35392-88.16128 86.35392z m-17.08544-126.83264v88.15616h11.68896q38.66624 0 38.67648-44.9792 2.70336-46.76096-39.5776-43.17696z" fill="#FFFFFF" p-id="7186"></path></svg>
                <div style="margin-top: -20px;">
                  <span style="color: #8c939d;">T&C Jobslink （不跨境版）</span>
                </div>
              </div>
              <div style="text-align: center;
                          cursor:pointer;
                          border: 1px #cccccc dashed;
                          padding: 10px 10px 0 8px;
                          margin-left: 10px" @click="downloadFile3()">
                <svg t="1703575432397" class="icon" viewBox="0 0 1024 1024"
                     version="1.1" xmlns="http://www.w3.org/2000/svg"
                     p-id="7180" width="40" height="40"><path d="M901.08928 925.3888a48.13824 48.13824 0 0 1-14.24896 34.38592 48.77312 48.77312 0 0 1-34.38592 14.24896H171.07456a48.13824 48.13824 0 0 1-34.3808-14.24896 48.74752 48.74752 0 0 1-14.24896-34.38592V49.42336a48.18944 48.18944 0 0 1 14.24896-34.40128A48.74752 48.74752 0 0 1 171.07456 0.77824h417.9968a48.5888 48.5888 0 0 1 34.59072 14.09024l263.3472 263.33184a48.68096 48.68096 0 0 1 14.08 34.59072z" fill="#EBECF0" p-id="7181"></path><path d="M901.08928 925.3888v48.68608a48.18944 48.18944 0 0 1-14.24896 34.39616 48.77312 48.77312 0 0 1-34.38592 14.24896H171.07456a48.70656 48.70656 0 0 1-48.68096-48.69632v-48.63488a48.13824 48.13824 0 0 0 14.24384 34.38592 48.74752 48.74752 0 0 0 34.38592 14.24896h681.32864a48.81408 48.81408 0 0 0 48.68608-48.68608z" fill="#C1C7D0" p-id="7182"></path><path d="M25.11872 536.09472h973.24544v243.33824a48.81408 48.81408 0 0 1-48.61952 48.68096H73.81504a48.18944 48.18944 0 0 1-34.39616-14.24384 48.74752 48.74752 0 0 1-14.24896-34.38592z" fill="#317BFF" p-id="7183"></path><path d="M122.496 536.08448V438.71744L25.11872 536.08448z m778.59328 0l0.93184-97.36704 96.86016 97.36704z" fill="#234AE8" p-id="7184"></path><path d="M901.08928 312.73984v6.84032h-263.3216a48.6912 48.6912 0 0 1-48.6912-48.68096V0.72704a48.5888 48.5888 0 0 1 34.5856 14.09024l263.76192 263.22944a49.3312 49.3312 0 0 1 13.66528 34.69312z" fill="#C1C7D0" p-id="7185"></path><path d="M259.67616 606.58176l19.7888 102.54848 18.8928-102.5536h52.1728l-40.47872 165.52448H256.0768l-18.8928-96.25088h-0.90112l-18.88768 96.25088H164.32128l-41.37984-165.51936h53.07392l17.99168 102.54848h0.90112l19.7888-102.5536zM447.68256 602.0864q81.8432 3.60448 87.25504 86.35392-3.6096 82.77504-87.25504 86.35904-83.6608-2.69824-86.35904-87.26016 4.49024-80.95232 86.35904-85.4528z m0 40.47872q-30.59712 0.90624-32.384 45.8752 1.792 46.78656 32.384 47.67744 32.384-0.89088 33.28-47.67744-1.81248-45.8752-33.28-45.8752zM628.49024 714.53184h-16.18944V772.096h-53.96992v-165.51936h78.2592q76.4416-1.792 72.8576 46.77632-0.896 32.38912-27.88864 40.48384 30.5664 6.2976 28.78976 44.07296v7.19872q-0.90112 24.28416 5.4016 21.59104v5.39648h-54.88128q-2.68288-5.4016-2.688-28.78464 3.584-31.47776-29.69088-28.78464z m-16.18944-69.26848v32.384h21.59104q26.9824 0.90624 26.07616-15.29344-0.896-16.18944-22.4768-17.09056zM809.29792 772.096h-71.0656v-165.51424h72.86784q85.4528 0.90624 86.35904 79.16544 0 86.35392-88.16128 86.35392z m-17.08544-126.83264v88.15616h11.68896q38.66624 0 38.67648-44.9792 2.70336-46.76096-39.5776-43.17696z" fill="#FFFFFF" p-id="7186"></path></svg>
                <div style="margin-top: -20px;">
                  <span style="color: #8c939d;">T&C Jobslink(专才版）One-Off</span>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row1" style="margin-top: -5px;">
        <el-col :span="12">
          <el-form-item label="T&C signed">
            <el-upload
              drag
              :action="uploadUrl"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              accept=".pdf,.doc,.docx"
              name="file"
              :headers="headers"
              multiple
              :limit="100"
              ref="upload"
              :on-exceed="handleExceed"
              :on-success="handleFileSuccess"
              :file-list="form.fileList">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">Upload(pdf/word)</div>
              <!--<div style="display: flex;align-items: center;">-->
                <!--<i class="el-icon-upload" style="font-size: 35px;"></i>-->
                <!--<span style="color: #99a9bf;font-size: 15px;margin-left: 2px;">-->
                  <!--Upload(pdf/word)</span>-->
              <!--</div>-->
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row1">
        <el-col :span="8">
          <el-form-item label="Remark" prop="remark">
            <el-input
              :autosize = "{ minRows: 4 }"
              v-model="form.remark"
              type="textarea"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row1">
        <el-col :span="8">
            <el-button type="primary" @click="submitForm">Save</el-button>
            <el-button @click="cancel" style="margin-left: 10px;">Cancel</el-button>
            <el-button v-if="isEdit" type="warning" @click="handleAssign" style="margin-left: 10px;">Assign</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-dialog
      title="Assignment"
      :visible.sync="open"
      width="800px"
      append-to-body
    >
      <el-form
        :model="queryParamsUser"
        ref="queryFormUser"
        size="small"
        :inline="true"
        label-width="68px"
        style="margin-top: 20px;">
        <!--form表单中只有一个输入框的时候，在输入框中按下回车就是提交该表单并且会自动刷新页面。-->
        <el-form-item
          label="Name"
          prop="userName">
          <el-input
            v-model="queryParamsUser.userName"
            placeholder=""
            clearable
            @keyup.enter.native="handleUserQuery"
          />
        </el-form-item>
        <el-form-item
          label="Name"
          prop="userName"
          style="display: none;">
          <el-input
            v-model="queryParamsUser.userName"
            placeholder=""
            clearable
            @keyup.enter.native="handleUserQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleUserQuery">Search</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="candidateList2"
        style="margin-top: 0px;">
        <el-table-column
          width="60px"
          label="action"
          align="left"
          class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-check"
              @click="handleAddUserCand(scope.row)"
            >Assign</el-button>
          </template>
        </el-table-column>
        <el-table-column label="name" align="center" key="userName" prop="userName" />
        <el-table-column label="nick" align="center" key="nickName" prop="nickName" />
        <el-table-column label="phone" align="center" key="phonenumber" prop="phonenumber" />
      </el-table>

      <pagination
        v-show="totalUser>0"
        :total="totalUser"
        :page.sync="queryParamsUser.pageNum"
        :limit.sync="queryParamsUser.pageSize"
        @pagination="getCandList"
      />
    </el-dialog>
  </div>
</template>

<script>
  import { listPclient,
    getClientFileDownload,
    getClientCheck,
    getPclient,
    delPclient, addPclient, updatePclient } from "@/api/system/pclient";
  import { listUser, listUser2, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus} from "@/api/system/user";
  import { listClient, getClient, delClient, addClient, updateClient } from "@/api/system/client";

import { getToken } from "@/utils/auth";



export default {
  name: "PclientAdd",
  dicts: ['sys_normal_disable', 'sys_user_sex'],
  data() {
    return {
      candidateList2: [],
      queryParamsUser: {
        pageNum: 1,
        pageSize: 10,
        userName: null
      },
      totalUser: 0,
      itemForm: {},
      id: null,
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      isEdit: false,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      candidateList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      uploadUrl: "http://jobslink.megaslink.com/prod-api" + "/common/upload", // process.env.VUE_APP_BASE_API上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken()
      },
      formJobs: {},
      // 查询参数
      queryParams: {
        id: null,
        email1: null,
        name: null,
        industry: null,
        contact1: null,
        pos1: null,
        tel11: null,
        remark: null,
        createAt: null,
        filePath: null,
        address: null,
        signerName: null,
        signerPosition: null
      },
      fileData: {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
      // 表单参数
      form: {
        id: null,
        email1: null,
        name: null,
        industry: null,
        contact1: null,
        pos1: null,
        tel11: null,
        remark: null,
        createAt: null,
        filePath: null,
        address: null,
        signerName: null,
        signerPosition: null
      },
      paramsData: {
        id : null,
        type : null,
        fileType : null,
        companyName : null,
        address : null,
        signerName: null,
        signerPosition: null
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: "name is null", trigger: "blur" }
        ],
        industry: [
          { required: true, message: "industry is null", trigger: "blur" }
        ]
      },
      pdfUrl: null,
      pageTotal: null
    };
  },
  // 给Vue的实例注入数据，进行数据监听
  created() {
    // this.form.createAt = new Date();
    console.log("created");
    this.id = this.$route.query.id;
    if (this.id == null || this.id == '' || this.id  == undefined) {

    } else {
      // this.getCandList();
      this.isEdit = true;
      this.queryParams.id = this.id;
      this.getList();
    }
  },
  methods: {
    handleBlur(){
      //检测输入是否已经存在
      getClientCheck(this.form.name).then(response => {
        if (response.code == 200) {

        } else {
          this.$modal.alertError("Name already exists");
        }
      }).catch(err => {
        this.$modal.alertError("Name already exists");
      }).finally(f => {

      });
    },
    downFileFuc(type, fileType){
      this.loading = true;
      this.paramsData.id = 1;
      this.paramsData.type = type;
      this.paramsData.fileType = fileType;
      this.paramsData.companyName = this.form.name;
      this.paramsData.address = this.form.address;
      this.paramsData.signerName = this.form.signerName;
      this.paramsData.signerPosition = this.form.signerPosition;
      getClientFileDownload(this.paramsData).then(response => {
        console.log(response);
        if (response.code == 200) {
          let filename = response.data.filename;
          this.$download.name(filename, false);
        }
      }).finally(f => {
        this.loading = false;
      });
    },
    downloadFile1(){
      if (this.form.name == null || this.form.name == '') {
        this.$modal.msgError("Please fill in the name");
        return;
      }
      if (this.form.address == null || this.form.address == '') {
        this.$modal.msgError("Please fill in the address");
        return;
      }
      if (this.form.id == null || this.form.id == '') {
        this.form.id = 0;
      }
      this.downFileFuc(1,2);
    },
    downloadFile2(){
      if (this.form.name == null || this.form.name == '') {
        this.$modal.msgError("Please fill in the name");
        return;
      }
      if (this.form.id == null || this.form.id == '') {
        this.form.id = 0;
      }
      this.downFileFuc(1,1);
    },
    downloadFile3(){
      if (this.form.name == null || this.form.name == '') {
        this.$modal.msgError("Please fill in the name");
        return;
      }
      if (this.form.address == null || this.form.address == '') {
        this.$modal.msgError("Please fill in the address");
        return;
      }
      if (this.form.id == null || this.form.id == '') {
        this.form.id = 0;
      }
      this.downFileFuc(1,3);
    },
    handleAddUserCand(row){
      //分配任务
      this.$modal.loading("loading...");
      this.itemForm.createUserId = row.userName;
      this.itemForm.busiNature = this.itemForm.industry;
      this.itemForm.assId = row.userId;
      this.itemForm.type = "1";
      addClient(this.itemForm).then(response => {
        this.$modal.msgSuccess("success");
        const obj = { path: "/client/pclient", name: "PClient" };
        this.$tab.closePage(obj);
        setTimeout(()=> {
          const obj = { path: "/client/pclient" };
          this.$tab.closeOpenPage(obj);
        }, 300);
        // const obj = { path: "/client/pclient" };
        // this.$tab.closeOpenPage(obj);
      }).catch(err => {
        this.$modal.msgError("Fail,Please Again");
      }).finally(f => {
        this.open = false;
        this.$modal.closeLoading();
      });
    },
    handleAssign() {
      /**
       * 地址为必须
       * @type {boolean}
       */
      if(this.form.address == null || this.form.address == '') {
        this.$modal.alertError("when assign , the address must write");
        return;
      }
      this.open = true;
      this.itemForm = this.form;
    },
    getCandList() {
      // this.loading = true;
      listUser2(this.queryParamsUser).then(response => {
        this.candidateList2 = response.rows;
        this.totalUser = response.total;
        // this.loading = false;
      });
    },
    handleUserQuery() {
      this.queryParamsUser.pageNum = 1;
      this.getCandList();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
      // 截取上传文件的后缀名
      let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      console.log(fileType);
      // 判断文件名的类型，允许多种就判断多个
      if (fileType.toLocaleLowerCase() == 'pdf' || fileType.toLocaleLowerCase() == 'doc' || fileType.toLocaleLowerCase() == 'docx') {
        let Base64 = require('js-base64').Base64
        window.open('http://www.megaslink.com:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(this.form.filePath)));
      } else {
        this.$message.warning("文件类型必须为pdf,doc,docx格式")
        // 返回false 就不会执行上传操作了
        return false
      }
    },
    // 只能上传单个文件，选择文件覆盖原有文件
    // changeUpload(file, fileList) {
    //   if (fileList.length > 1 && file.status !== "fail") {
    //     fileList.splice(0, 1);
    //     // 多选并上传多个文件：
    //     // 方法一：fileList.splice(0, n)。n:多选文件的数量。--数组从前往后顺序截取。
    //     // 方法二：fileList.splice(0, -n)。n:多选文件的数量。--数组从后往前顺序截取（保留最新上传的，截去之前上传的。--方法一反之）
    //   } else if (file.status === "fail") {
    //     this.$message.warning("上传失败，请重新上传！");
    //     fileList.splice(0, 1);
    //   }
    // },
    handleExceed(files, fileList) {
      // this.$message.warning(`当前限制只能上传 1 个文件或者删除重新上传`);
    },
    handleFileSuccess(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList);
      if (response.code == 200) {
        console.log("================" + response.url);
        this.form.filePath = response.url;
        this.form.fileList.push( {
            name: file.name,
            url: response.url
          }
        )
        console.log(this.form.fileList);
      } else {
        this.$message.warning(`上传失败`);
        // this.form.fileList.splice(this.form.fileList.length - 1, 1);
      }
      // fileList[0].response.url;
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`remove ${ file.name }？`);
    },
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.$modal.loading("loading...");
      // this.$modal.closeLoading();
      listPclient(this.queryParams).then(response => {
        this.candidateList = response.rows;
        if (this.candidateList != null) {
          this.form = this.candidateList[0];
          this.form.fileList = [];
          if (this.form.filePath != null && this.form.filePath != '') {
            this.form.fileListPath = this.form.filePath.split(",");
            for (let i = 0; i < this.form.fileListPath.length; i++) {
              this.form.fileList.push({
                name: this.form.fileListPath[i].substring(this.form.filePath.lastIndexOf('/') + 1),
                url: this.form.fileListPath[i]
              });
            }
          }
        }
        this.$modal.closeLoading();
      });
    },
    // 取消按钮
    cancel() {
      const obj = { path: "/client/pclient", name: "PClient" };
      this.$tab.closePage(obj);
      setTimeout(()=> {
        const obj = { path: "/client/pclient" };
        this.$tab.closeOpenPage(obj);
      }, 300);
      // const obj = { path: "/client/pclient" };
      // this.$tab.closeOpenPage(obj);
      // const obj = { path: "/pclient", name: "Pclient" };
      // this.$tab.closePage(obj);
      // setTimeout(()=> {
      //   this.$router.push({path:'/pclient'})
      // }, 300);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.filePath = '';
          if (this.form.fileList != null && this.form.fileList.length > 0) {
            for (let i = 0; i < this.form.fileList.length; i++) {
              if (i == (this.form.fileList.length - 1)) {
                this.form.filePath = this.form.filePath + this.form.fileList[i].url;
              } else {
                this.form.filePath = this.form.filePath + this.form.fileList[i].url + ",";
              }
            }
          }
          if (this.form.id != null) {
            updatePclient(this.form).then(response => {
              this.$modal.msgSuccess("success");
              const obj = { path: "/client/pclient", name: "PClient" };
              this.$tab.closePage(obj);
              setTimeout(()=> {
                const obj = { path: "/client/pclient" };
                this.$tab.closeOpenPage(obj);
              }, 300);
              // const obj = { path: "/client/pclient" };
              // this.$tab.closeOpenPage(obj);
            });
          } else {
            // this.form['ccompanyList'] = this.ccompanyList;
            // this.form['schoolList'] = this.schoolList;
            addPclient(this.form).then(response => {
              console.log("=====================qwe====================")
              this.$modal.msgSuccess("success");
              const obj = { path: "/client/pclient", name: "Pclient" };
              this.$tab.closePage(obj);
              setTimeout(()=> {
                const obj2 = { path: "/client/pclient" };
                this.$tab.closeOpenPage(obj2);
              }, 300);
              // const obj = { path: "/client/pclient" };
              // this.$tab.closeOpenPage(obj);
              // this.open = false;
              // this.getList();
            });
          }
        }
      });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
  .pclient_form .el-form-item__label {
    line-height: 0px;
  }
  .card3 {
    background-image: linear-gradient(to right, #000 35%, rgba(255,255,255,0) 0%); /* 35%设置虚线点x轴上的长度 */
    background-position: bottom; /* top配置上边框位置的虚线 */
    background-size: 10px 1px; /* 第一个参数设置虚线点的间距；第二个参数设置虚线点y轴上的长度 */
    background-repeat: repeat-x;
  }
  .row1 {
    display: flex;flex-wrap: wrap;justify-content: flex-start;
  }
  .row2 {
    display: flex;flex-wrap: wrap;justify-content: flex-end;
  }
</style>
